<template>
  <div class="apiListMain">
    <PageHeader :lang="lang"></PageHeader>
    <!--安全日志-->
    <div class="pageBody" id="pageBody">
      <!-- 左侧部分 -->
      <div class="pageSide">
        <ul class="apiNav">
          <li v-if="titleGuiden.Items && titleGuiden.Items.length > 0">
            <h3><img src="./images/guide.png">{{langType === 'en' ? titleGuiden.EName : titleGuiden.Name}}</h3>
            <a v-for="item in titleGuiden.Items" @click="clickTitle(item.ID)" :class="{active : currentid === item.ID}">
            {{langType === 'en' ? item.EName : item.Name}}
           </a>
          </li>

          <li v-if="titleWebSocketn.Items && titleWebSocketn.Items.length > 0">
            <h3><img src="./images/rest.png">{{langType === 'en' ? titleWebSocketn.EName : titleWebSocketn.Name}}</h3>
            <a v-for="item in titleWebSocketn.Items" @click="clickTitle(item.ID)" :class="{active : currentid === item.ID}">
              {{langType === 'en' ? item.EName : item.Name}}
            </a>
          </li>

          <li v-if="titleRest.Items && titleRest.Items.length > 0">
            <h3><img src="./images/webSocket.png">{{langType === 'en' ? titleRest.EName : titleRest.Name}}</h3>
            <a v-for="item in titleRest.Items" @click="clickTitle(item.ID)" :class="{active : currentid === item.ID}">
              {{langType === 'en' ? item.EName : item.Name}}
            </a>
          </li>

        </ul>
      </div>

      <!-- 右侧部分 -->
      <div class="pageMain">
      <!--   -->
        <div class="apiList_content" v-html="cumentList">


        </div>
      </div>
    </div>

    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import LocalStorage from '@/utils/LocalStorage.js'
import Utils from '@/utils/Utils.js'
export default {
  mixins: [commonMixins],
  data () {
    return {
      currentid: '',
      titleGuiden: {},
      titleWebSocketn: {},
      titleRest: {},
      langType: '',
      cumentList: ''
    }
  },
  watch: {
    langKey () {
      this.langKeyIs()
    }
  },
  components: {

  },
  methods: {
    clickTitle (ID) {
      this.currentid = ID
      LocalStorage.set('API_MENU', this.currentid)
      this.apiDocument()
    },
    titleList () {
      this.$http.post('MyIDCMApi/GetApiDocumentTitleList')
      .then((res) => {
        if (res.Status === true) {
          this.titleGuiden = res.Data[0] || {}
          this.titleWebSocketn = res.Data[1] || {}
          this.titleRest = res.Data[2] || {}
          if (!this.currentid) {
            this.currentid = res.Data[0].Items[0].ID
          }
          this.langKeyIs()
        }
      })
    },
    langKeyIs () {
      if (this.langKey === 'zh-CN' || this.langKey === 'zh-Hant') {
        this.langType = 'zh-CN'
      } else {
        this.langType = 'en'
      }
      this.apiDocument()
    },
    apiDocument () {
      this.cumentList = ''
      this.$http.post('MyIDCMApi/GetApiDocument', {
        id: this.currentid,
        languageCode: this.langType
      })
      .then((res) => {
        if (res.Status === true) {
          res.Extra.Content = Utils.replaceText(res.Extra.Content, 'siteAddress', this.mixConfig.siteAddress)
          res.Extra.Content = Utils.replaceText(res.Extra.Content, 'siteName', this.mixConfig.siteName)
          this.cumentList = res.Extra.Content || ''
        }
      })
    }
  },
  mounted () {
    this.currentid = LocalStorage.get('API_MENU') || ''
    this.titleList()
  },
  beforeDestroy () {
    localStorage.removeItem('API_MENU')
  }
}
</script>
<style lang="less">

.apiListMain {

  .apiNav{
    font-family: 'MontserratLight';
    overflow: hidden;
    padding-bottom: 30px;

    li {
      margin-bottom: 10px;
    }
    h3{
      line-height: 26px;
      color: #fff;
    }

    a{
      position: relative;
      display: block;
      padding-left: 26px;
      line-height: 32px;
      color: #ccc;

      &:after{
        position: absolute;
        left: 12px;
        top: 14px;
        content: '';
        display: block;
        width:8px;
        height: 8px;
        border-radius: 100%;
        background: #ccc;
      }

      &.active{
        color: #3782FF;

        &:after{
          background: #3782FF;
        }
      }
    }

    img{
      vertical-align: middle;
      padding-right: 10px;
    }
  }

  .apiList_content {
    color: #ccc !important;
    line-height: 26px;
    font-family: 'MontserratLight';

    a{
      color: #ccc !important;
      line-height: 26px;
    }
    span{white-space: pre-wrap !important;}
    strong { font-size:16px; color:#fff;}
  }


  .tableList {
    border-collapse: collapse;

    thead{
      background: #191E2A;
    }

    tbody{
      background: #202832;
    }

    td{
      width: 50%;
      line-height: 46px;
      padding:0 20px;
      border: 1px solid #3B404B;
    }
  }

  .preStyle {
    padding: 15px;
    background: #202832;
  }
}


</style>

